<template>
  <div id="typeView">
    <!--  搜索-->
    <!--<el-affix :offset="100">-->
    <!--  <input-search></input-search>-->
    <!--</el-affix>-->
    <input-search class="input-search" />
    <!-- 分类展示-->
    <div style="margin: 75px 0 10px">
      <h2 style="text-align: center">全部分类</h2>
      <div v-for="item in typeList" :key="item.value">
        <h3>
          <span class="text-link" @click="toSearch(item.label)">
            <span
              :class="`icon-${item.icon} el-icon`"
              style="margin-right: 5px"
            ></span>
            {{ item.label }}
          </span>
        </h3>
        <el-space wrap>
          <el-text
            v-for="ch in item.children"
            :key="ch.value"
            class="text-link"
            @click="toSearch(ch.label)"
          >
            {{ ch.label }}
          </el-text>
        </el-space>
      </div>
    </div>
    <front-footer />
  </div>
</template>
<script lang="ts" setup>
import InputSearch from "@/components/InputSearch.vue";
import { ref } from "vue";
import { GoodsTypeControllerService, GoodsTypeOption } from "@/api";
import FrontFooter from "@/components/FrontFooter.vue";
import { useSearchStore } from "@/store";
import { useRouter } from "vue-router";

const typeList = ref<GoodsTypeOption[]>([]);

function getTypeData() {
  GoodsTypeControllerService.getGoodsTypeOptionUsingGet().then((res) => {
    typeList.value = res.data || [];
  });
}

getTypeData();
const useSearch = useSearchStore();
const router = useRouter();

//前往搜索
function toSearch(keyword: string) {
  //添加历史记录
  useSearch.addSearch(keyword);
  // 跳转到路由
  router.push({
    path: "/search",
    query: {
      keyword: keyword,
    },
  });
}
</script>

<style lang="scss" scoped>
#typeView {
  position: absolute;
  width: 80%;
  left: 10%;
}
</style>
